<template>
  <div id="wrapper">
    <div id="gamecontainer">
      <canvas v-show="gameUI.gamecanvas" id="gamecanvas" width="640" height="480" class="gamelayer"> </canvas>

      <div v-show="gameUI.scorescreen" id="scorescreen" class="gamelayer">
        <img id="togglemusic" src="/img/images/icons/sound.png" alt="Toggle Music" />
        <img src="/img/images/icons/prev.png" alt="Restart Level" />
        <span id="score">Score: 0</span>
      </div>

      <div v-show="gameUI.gamestartscreen" id="gamestartscreen" class="gamelayer">
        <img src="/img/images/icons/play.png" alt="Play Game" @click="showLevelScreen" /><br />
        <img src="/img/images/icons/settings.png" alt="Settings" />
      </div>

      <div v-show="gameUI.levelselectscreen" id="levelselectscreen" class="gamelayer">
        <input v-for="(item, index) in levels.data" @click="startGame(index)" type="button" :value="index + 1" />
      </div>

      <div v-show="gameUI.loadingscreen" id="loadingscreen" class="gamelayer">
        <div id="loadingmessage"></div>
      </div>

      <div v-show="gameUI.endingscreen" id="endingscreen" class="gamelayer">
        <div>
          <p id="endingmessage">The Level Is Over Message</p>
          <p id="playcurrentlevel" class="endingoption"><img src="/img/images/icons/prev.png" alt="Replay" />Replay Current Level</p>
          <p id="playnextlevel" class="endingoption"><img src="/img/images/icons/next.png" alt="Next" />Play Next Level</p>
          <p id="returntolevelscreen" class="endingoption"><img src="/img/images/icons/return.png" alt="Return" />Return to Level Screen</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "@vue/runtime-core";
import { levelData_1, GameBody } from "./chapter4/gameData";
import { Game, levels } from "./chapter2/game";
export default defineComponent({
  setup() {
    const gameUI = reactive({
      gamecanvas: true,
      scorescreen: true,
      gamestartscreen: true,
      levelselectscreen: true,
      loadingscreen: true,
      endingscreen: true,
    });
    let game: Game;
    const gameBodyList = ref([]);

    onMounted(() => {
      let canvas: HTMLCanvasElement = document.getElementById("gamecanvas");
      let context: CanvasRenderingContext2D = canvas.getContext("2d");
      let option = {
        canvas: canvas,
        context: context,
        gameUI: gameUI,
      };
      game = new Game(option);
      game.init(game);
      
    });

    function showLevelScreen() {
      this.gameUI.loadingscreen = false;
      this.gameUI.endingscreen = false;
      this.gameUI.gamestartscreen = false;
      this.gameUI.gamecanvas = false;
      this.gameUI.scorescreen = false;
      this.gameUI.levelselectscreen = true;
    }

    function startGame(num: number) {
      levels.load(num);
    }

    return {
      gameUI: gameUI,
      levels: levels,
      showLevelScreen: showLevelScreen,
      startGame: startGame,
    };
  },
});
</script>

<style scoped>
#wrapper {
  position: absolute;
}

#gamecontainer {
  /* Set game container width, height and background */
  width: 640px;
  height: 480px;
  background: url("/img/images/splashscreen.png");
}

.gamelayer {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
}

/* Game Starting Menu Screen */

#gamestartscreen {
  padding-top: 250px;
  text-align: center;
}

#gamestartscreen img {
  margin: 10px;
  cursor: pointer;
}

/* Level Selection Screen */

#levelselectscreen {
  padding-top: 150px;
  padding-left: 50px;
}

#levelselectscreen input {
  margin: 20px;
  cursor: pointer;

  background: url("/img/images/icons/level.png") no-repeat;
  color: yellow;
  font-size: 20px;

  width: 64px;
  height: 64px;

  border: 0;

  /* Remove the default blue border when an input is selected */
  outline: 0;
}

/* Loading Screen */

#loadingscreen {
  background: rgba(100, 100, 100, 0.5);
}

#loadingmessage {
  margin-top: 400px;
  text-align: center;
  height: 48px;
  color: white;
  background: url("/img/images/loader.gif") no-repeat center;
  font: 12px Arial;
}

/* Score Screen */

#scorescreen {
  height: 60px;
  font: 32px "Comic Sans MS";
  text-shadow: 0 0 2px black;
  color: white;
}

#scorescreen img {
  opacity: 0.6;
  top: 5%;
  left: 5%;
  position: relative;
  padding: 8px;
  cursor: pointer;
}

#score {
  position: absolute;
  top: 5%;
  right: 5%;
}
</style>
